import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$configuration, _Object, AutoTable, Button, Plc, PlcAddress, PlcDate, PlcInput, PlcNumber, PlcObject, PlcOv} from "../../../../packages";
import {PlainObject} from "plain-utils/utils/event";
import {useTableOption} from "../../../module/useTableOption";
import {deepcopy} from "plain-utils/object/deepcopy";

export const demo1 = designPage(() => {

  const object = $configuration.use('object')!;

  const option = useTableOption({
    url: '/demo',
    /*permit: {
      show: {
        insert: true,
        update: true,
      }
    },*/
    render: () => <>
      <Plc title="编号id" field="id" width={350} hideInForm/>
      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false}/>
      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false}/>
      <PlcDate title="日期" field="dateVal"/>
      <PlcNumber title="计数count" field="count" required/>
      <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
    </>
  });

  const state = reactive({
    single: undefined as undefined | PlainObject,
    multiple: undefined as undefined | PlainObject[],
  });

  const single = async () => {
    const selected = await object({ option, selected: state.single, map: { objText: 'normalText', objId: 'id' } });
    console.log(deepcopy(selected));
    state.single = selected;
  };

  const multiple = async () => {
    const selected = await object({ option, selected: state.multiple, multiple: true });
    console.log(deepcopy(selected));
    state.multiple = selected;
  };

  return () => (
    <DemoRow title="对象选择服务">
      <Button onClick={single}>
        <span>单选</span>
        {!!state.single && <span>{state.single.objText}</span>}
      </Button>
      <Button onClick={multiple}>
        <span>多选</span>
        {!!state.multiple && state.multiple.map(i => i.normalText).join(',')}
      </Button>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {} as any,
  });

  const option = useTableOption({
    url: '/demo',
    render: () => <>
      <Plc title="编号id" field="id" width={350} hideInForm/>
      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false}/>
      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false}/>
      <PlcDate title="日期" field="dateVal"/>
      <PlcNumber title="计数count" field="count" required/>
      <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
    </>
  });

  return () => (
    <DemoRow title="对象选择框">
      <_Object
        v-model={state.formData.parentName}
        width="200"
        option={option}
        row={state.formData}
        labelField="normalText"
        map={{ parentId: 'id', parentName: 'normalText' }}
      />
      <_Object
        v-model={state.formData.parentName}
        width="200"
        option={option}
        row={state.formData}
        labelField="normalText"
        map={{ parentId: 'id', parentName: 'normalText' }}
      />
      <div>
        {JSON.stringify(state.formData)}
      </div>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    formData: {
      list: undefined as undefined | PlainObject[]
    },
  });

  const option = useTableOption({
    url: '/demo',
    render: () => <>
      <Plc title="编号id" field="id" width={350} hideInForm/>
      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false}/>
      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false}/>
      <PlcDate title="日期" field="dateVal"/>
      <PlcNumber title="计数count" field="count" required/>
      <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
    </>
  });

  return () => (
    <DemoRow title="对象选择框：多选">
      <_Object
        v-model={state.formData.list}
        width="200"
        option={option}
        labelField="normalText"
        multiple
      />
      <_Object
        v-model={state.formData.list}
        width="200"
        option={option}
        labelField="normalText"
        multiple
      />
      <div>
        {state.formData.list?.map(item => (
          <div key={item.id}><h3>{item.normalText} {'=>'} </h3>{JSON.stringify(item)}</div>
        ))}
      </div>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const option = useTableOption({
    url: '/demo',
  });

  const parentOption = useTableOption({
    url: '/demo',
    render: () => <>
      <Plc title="编号id" field="id"/>
      <PlcInput title="文本normalText" field="normalText" fixed="left"/>
    </>
  });

  return () => (
    <DemoRow title="基本用法">
      <AutoTable option={option}>
        <Plc title="编号" field="id" hideInForm/>
        <PlcObject title="父对象" field="parentName" width={150} option={parentOption} map={{ parentId: 'id', parentName: 'normalText' }} labelField="normalText"/>
        <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
        <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
        <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
        <PlcOv title="选项值" field="ovVal" ov="promotion"/>
        <PlcAddress provinceField="provinceVal" cityField="cityVal" districtField="districtVal"/>
        <PlcNumber title="计数" field="count" required/>
        <PlcInput title="文本" field="normalText" required width={150} fixed="left"/>
        <PlcNumber title="数字" field="numberVal"/>
      </AutoTable>
    </DemoRow>
  );
});
